مسیرهای موازی در Next.js: ساخت طرح‌بندی‌های داینامیک صفحه

Next.js، یکی از فریمورک‌های پیشرو React، دائماً در حال تکامل است تا ابزارهای قدرتمندی برای ساخت اپلیکیشن‌های وب مدرن در اختیار توسعه‌دهندگان قرار دهد. یکی از هیجان‌انگیزترین ویژگی‌های معرفی شده در نسخه‌های اخیر، مسیرهای موازی (Parallel Routes) است. این ویژگی به شما امکان می‌دهد چندین بخش مستقل را در یک طرح‌بندی صفحه رندر کنید و انعطاف‌پذیری و کنترل بی‌نظیری بر ساختار و تجربه کاربری اپلیکیشن خود داشته باشید.

مسیرهای موازی چه هستند؟

به طور سنتی، یک مسیر در Next.js با یک کامپوننت صفحه مطابقت دارد. وقتی به مسیر دیگری می‌روید، کل صفحه دوباره رندر می‌شود. مسیرهای موازی این پارادایم را با امکان رندر کردن چندین کامپوننت همزمان در یک طرح‌بندی، که هر کدام توسط بخش مسیر مستقل خود مدیریت می‌شوند، می‌شکنند. این را مانند تقسیم صفحه خود به بخش‌های مجزا در نظر بگیرید که هر کدام URL و چرخه حیات خود را دارند و همه در یک صفحه نمایش همزیستی می‌کنند.

این ویژگی امکانات زیادی برای ایجاد رابط‌های کاربری پیچیده‌تر و داینامیک‌تر باز می‌کند. به عنوان مثال، می‌توانید از مسیرهای موازی برای موارد زیر استفاده کنید:

• نمایش یک نوار ناوبری پایدار در کنار محتوای اصلی.
• پیاده‌سازی پنجره‌های مودال یا نوارهای کناری بدون تأثیر بر جریان اصلی صفحه.
• ایجاد داشبورد با ویجت‌های مستقل که می‌توانند به طور جداگانه بارگیری و به‌روزرسانی شوند.
• تست A/B نسخه‌های مختلف یک کامپوننت بدون تأثیر بر ساختار کلی صفحه.

درک مفهوم: اسلات‌ها (Slots)

مفهوم اصلی پشت مسیرهای موازی، «اسلات» است. اسلات یک ناحیه نام‌گذاری شده در طرح‌بندی شماست که یک بخش مسیر خاص در آن رندر می‌شود. شما این اسلات‌ها را در دایرکتوری app خود با استفاده از نماد @ و به دنبال آن نام اسلات تعریف می‌کنید. به عنوان مثال، @sidebar یک اسلات به نام "sidebar" را نشان می‌دهد.

هر اسلات سپس می‌تواند با یک بخش مسیر مرتبط شود. وقتی کاربر به یک مسیر خاص می‌رود، Next.js کامپوننت مرتبط با آن بخش مسیر را در اسلات مربوطه در طرح‌بندی رندر می‌کند.

پیاده‌سازی: یک مثال عملی

بیایید با یک مثال عملی نحوه کار مسیرهای موازی را نشان دهیم. تصور کنید در حال ساخت یک اپلیکیشن تجارت الکترونیک هستید و می‌خواهید یک صفحه جزئیات محصول را با یک نوار کناری سبد خرید پایدار نمایش دهید.

۱. ساختار دایرکتوری

ابتدا، بیایید ساختار دایرکتوری اپلیکیشن خود را تعریف کنیم:

app/
  product/
    [id]/
      @cart/
        page.js  // کامپوننت سبد خرید
      page.js      // کامپوننت جزئیات محصول
    layout.js   // طرح‌بندی محصول
  layout.js     // طرح‌بندی ریشه

در اینجا نقش هر فایل توضیح داده شده است:

• app/layout.js: طرح‌بندی ریشه برای کل اپلیکیشن.
• app/product/[id]/layout.js: یک طرح‌بندی مختص صفحه جزئیات محصول. اینجا جایی است که اسلات‌های خود را تعریف خواهیم کرد.
• app/product/[id]/page.js: کامپوننت اصلی جزئیات محصول.
• app/product/[id]/@cart/page.js: کامپوننت سبد خرید، که در اسلات @cart رندر خواهد شد.

۲. طرح‌بندی ریشه (app/layout.js)

طرح‌بندی ریشه معمولاً شامل عناصری است که در سراسر اپلیکیشن به اشتراک گذاشته می‌شوند، مانند هدرها و فوترها.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
برنامه تجارت الکترونیک من
        {children}
        
      
    
  );
}

۳. طرح‌بندی محصول (app/product/[id]/layout.js)

این بخش حیاتی است که در آن اسلات‌های خود را تعریف می‌کنیم. ما کامپوننت‌های صفحه اصلی محصول و سبد خرید را به عنوان پراپ دریافت می‌کنیم که به ترتیب با page.js و @cart/page.js مطابقت دارند.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    

      
{children}
      
    
  );
}

در این مثال، از یک طرح‌بندی flexbox ساده برای قرار دادن محتوای اصلی محصول و نوار کناری سبد خرید در کنار هم استفاده می‌کنیم. پراپ children شامل خروجی رندر شده app/product/[id]/page.js خواهد بود و پراپ cart شامل خروجی رندر شده app/product/[id]/@cart/page.js خواهد بود.

۴. صفحه جزئیات محصول (app/product/[id]/page.js)

این یک صفحه مسیر داینامیک استاندارد است که جزئیات محصول را بر اساس پارامتر id نمایش می‌دهد.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // دریافت داده‌های محصول بر اساس ID
  const product = await fetchProduct(id);

  return (
    

      
جزئیات محصول
      
{product.name}
      
{product.description}
      
قیمت: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // با منطق واقعی دریافت داده خود جایگزین کنید
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `محصول ${id}`, description: `توضیحات محصول ${id}`, price: 99.99 });
  }, 500));
}

۵. کامپوننت سبد خرید (app/product/[id]/@cart/page.js)

این کامپوننت سبد خرید را نشان می‌دهد که در اسلات @cart رندر خواهد شد.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

      
سبد خرید
      
تعداد اقلام در سبد: ۳
      پرداخت
    
  );
}

توضیح

وقتی کاربر به مسیر /product/123 می‌رود، Next.js:

1. طرح‌بندی ریشه (app/layout.js) را رندر می‌کند.
2. طرح‌بندی محصول (app/product/[id]/layout.js) را رندر می‌کند.
3. درون طرح‌بندی محصول، کامپوننت جزئیات محصول (app/product/[id]/page.js) را در پراپ children رندر می‌کند.
4. همزمان، کامپوننت سبد خرید (app/product/[id]/@cart/page.js) را در پراپ cart رندر می‌کند.

نتیجه یک صفحه جزئیات محصول با یک نوار کناری سبد خرید پایدار است که همگی در یک طرح‌بندی واحد رندر شده‌اند.

مزایای استفاده از مسیرهای موازی

• تجربه کاربری بهبود یافته: ایجاد رابط‌های کاربری تعاملی‌تر و جذاب‌تر با عناصر پایدار و بخش‌های داینامیک.
• افزایش قابلیت استفاده مجدد از کد: به اشتراک‌گذاری آسان‌تر کامپوننت‌ها و طرح‌بندی‌ها در مسیرهای مختلف.
• عملکرد بهتر: بارگیری و به‌روزرسانی بخش‌های صفحه به طور مستقل، که نیاز به رندر مجدد کل صفحه را کاهش می‌دهد.
• توسعه ساده‌تر: مدیریت طرح‌بندی‌ها و تعاملات پیچیده با یک ساختار ماژولار و سازمان‌یافته‌تر.
• قابلیت‌های تست A/B: تست آسان نسخه‌های مختلف بخش‌های خاص صفحه بدون تأثیر بر کل صفحه.

ملاحظات و بهترین شیوه‌ها

• تداخل مسیرها: مراقب باشید تا از تداخل بین مسیرهای موازی جلوگیری کنید. هر بخش مسیر باید هدف منحصر به فردی داشته باشد و با بخش‌های دیگر همپوشانی نداشته باشد.
• پیچیدگی طرح‌بندی: در حالی که مسیرهای موازی انعطاف‌پذیری زیادی ارائه می‌دهند، استفاده بیش از حد می‌تواند به طرح‌بندی‌های پیچیده‌ای منجر شود که نگهداری آن‌ها دشوار است. برای تعادل بین انعطاف‌پذیری و سادگی تلاش کنید.
• ملاحظات سئو: پیامدهای سئوی استفاده از مسیرهای موازی را در نظر بگیرید، به خصوص اگر محتوای اسلات‌های مختلف به طور قابل توجهی متفاوت باشد. اطمینان حاصل کنید که موتورهای جستجو می‌توانند محتوا را به درستی خزش و ایندکس کنند. از URLهای کانونیکال به درستی استفاده کنید.
• دریافت داده: دریافت داده را با دقت مدیریت کنید، به خصوص هنگام کار با چندین بخش مستقل. استفاده از انبارهای داده مشترک یا مکانیزم‌های کش را برای جلوگیری از درخواست‌های اضافی در نظر بگیرید.
• دسترسی‌پذیری: اطمینان حاصل کنید که پیاده‌سازی مسیر موازی شما برای همه کاربران، از جمله افراد دارای معلولیت، قابل دسترس باشد. از صفات ARIA مناسب و HTML معنایی برای ارائه یک تجربه کاربری خوب استفاده کنید.

کاربرد پیشرفته: رندر شرطی و اسلات‌های داینامیک

مسیرهای موازی به تعریف اسلات‌های استاتیک محدود نمی‌شوند. شما همچنین می‌توانید از رندر شرطی و اسلات‌های داینامیک برای ایجاد طرح‌بندی‌های انعطاف‌پذیرتر استفاده کنید.

رندر شرطی

شما می‌توانید کامپوننت‌های مختلف را به صورت شرطی در یک اسلات بر اساس نقش‌های کاربر، وضعیت احراز هویت یا عوامل دیگر رندر کنید.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    

      
{children}
      
    
  );
}

function AdminPanel() {
  return (
    

      
پنل ادمین
      
جزئیات محصول را اینجا مدیریت کنید.
    
  );
}

در این مثال، اگر کاربر نقش 'admin' داشته باشد، به جای سبد خرید، یک کامپوننت AdminPanel در اسلات @cart رندر خواهد شد.

اسلات‌های داینامیک

در حالی که کمتر رایج است، شما *می‌توانید* به صورت تئوری نام‌های اسلات را به صورت داینامیک بسازید، اما این کار به دلیل پیچیدگی و پیامدهای عملکردی بالقوه معمولاً توصیه نمی‌شود. بهتر است به اسلات‌های از پیش تعریف شده و قابل درک پایبند باشید. اگر نیاز به «اسلات‌های» داینامیک به وجود آمد، راه حل‌های جایگزین مانند استفاده از کامپوننت‌های استاندارد React با پراپ‌ها و رندر شرطی را در نظر بگیرید.

مثال‌های دنیای واقعی و موارد استفاده

بیایید برخی از مثال‌های دنیای واقعی از نحوه استفاده از مسیرهای موازی در انواع مختلف اپلیکیشن‌ها را بررسی کنیم:

• پلتفرم‌های تجارت الکترونیک: نمایش سبد خرید، پیشنهادات یا اطلاعات حساب کاربری در کنار جزئیات محصول یا صفحات دسته‌بندی.
• داشبوردها: ایجاد داشبورد با ویجت‌های مستقل برای نمایش معیارها، نمودارها و گزارش‌ها. هر ویجت می‌تواند به طور جداگانه بارگیری و به‌روزرسانی شود بدون اینکه کل داشبورد را تحت تأثیر قرار دهد. یک داشبورد فروش ممکن است داده‌های جغرافیایی را در یک مسیر موازی و عملکرد محصول را در دیگری نشان دهد، که به کاربر امکان می‌دهد آنچه را که می‌بیند بدون بارگذاری مجدد کل صفحه سفارشی کند.
• اپلیکیشن‌های شبکه‌های اجتماعی: نمایش یک نوار کناری چت یا پنل اعلان‌ها در کنار فید اصلی یا صفحات پروفایل.
• سیستم‌های مدیریت محتوا (CMS): ارائه یک پنجره پیش‌نمایش یا ابزارهای ویرایش در کنار محتوای در حال ویرایش. یک مسیر موازی می‌تواند پیش‌نمایش زنده‌ای از مقاله‌ای که در حال نوشته شدن است را نمایش دهد و با اعمال تغییرات، به صورت آنی به‌روزرسانی شود.
• پلتفرم‌های آموزشی: نمایش مواد درسی در کنار ویژگی‌های ردیابی پیشرفت یا تعاملات اجتماعی.
• اپلیکیشن‌های مالی: نمایش قیمت‌های لحظه‌ای سهام یا خلاصه‌های پورتفولیو در کنار اخبار یا مقالات تحلیلی. تصور کنید یک وب‌سایت خبری مالی از مسیرهای موازی برای نمایش داده‌های زنده بازار در کنار اخبار فوری استفاده می‌کند و به کاربران دیدی جامع از چشم‌انداز مالی ارائه می‌دهد.
• ابزارهای همکاری جهانی: امکان ویرایش همزمان اسناد یا کد با پنل‌های کنفرانس ویدیویی یا چت پایدار. یک تیم مهندسی توزیع شده در سانفرانسیسکو، لندن و توکیو می‌تواند از مسیرهای موازی برای کار بر روی یک سند طراحی به صورت همزمان استفاده کند، در حالی که یک تماس ویدیویی به طور مداوم در نوار کناری نمایش داده می‌شود و همکاری یکپارچه را در مناطق زمانی مختلف تقویت می‌کند.

نتیجه‌گیری

مسیرهای موازی در Next.js یک ویژگی قدرتمند است که دنیای جدیدی از امکانات را برای ساخت اپلیکیشن‌های وب داینامیک و انعطاف‌پذیر باز می‌کند. با اجازه دادن به شما برای رندر کردن چندین بخش مستقل در یک طرح‌بندی صفحه، مسیرهای موازی شما را قادر می‌سازند تا تجربیات کاربری جذاب‌تری ایجاد کنید، قابلیت استفاده مجدد از کد را افزایش دهید و فرآیند توسعه را ساده‌تر کنید. در حالی که در نظر گرفتن پیچیدگی‌های بالقوه و پیروی از بهترین شیوه‌ها مهم است، تسلط بر مسیرهای موازی می‌تواند به طور قابل توجهی مهارت‌های توسعه Next.js شما را افزایش دهد و به شما امکان ساخت اپلیکیشن‌های وب واقعاً نوآورانه را بدهد.

همانطور که Next.js به تکامل خود ادامه می‌دهد، مسیرهای موازی بدون شک به ابزاری مهم برای توسعه‌دهندگانی تبدیل خواهند شد که به دنبال شکستن مرزهای ممکن در وب هستند. با مفاهیم ذکر شده در این راهنما آزمایش کنید و کشف کنید که چگونه مسیرهای موازی می‌توانند رویکرد شما را برای ساخت اپلیکیشن‌های وب مدرن متحول کنند.